<div class="app-content-body dashboard">

    <div class="bg-light lter b-b wrapper-md hidden-print">
      <h1 class="m-n font-thin h3">仪表盘</h1>
    </div>

    <div class="wrapper-md ng-scope" ng-controller="FlotChartDemoCtrl">
      <div class="row">
        <div class="col-md-3">
          <div class="panel padder-v item flex">
            <div class="summary">
              <div class="h1 text-primary font-thin h1">1,123</div>
              <span class="text-muted text-xs">新增会员</span>
            </div>
            <div class="sparkchart">
              <div class="trend up"><i class="fa fa-long-arrow-up"></i> +10.66%</div>
              <div class="sparkline member">
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="panel padder-v item flex">
            <div class="summary">
              <div class="h1 text-primary font-thin h1">4,388</div>
              <span class="text-muted text-xs">日活用户</span>
            </div>
            <div class="sparkchart">
              <div class="trend up"><i class="fa fa-long-arrow-up"></i> +10.66%</div>
              <div class="sparkline member">
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="panel padder-v item flex">
            <div class="summary">
              <div class="h1 text-primary font-thin h1">3,321</div>
              <span class="text-muted text-xs">当日订单总数</span>
            </div>
            <div class="sparkchart">
              <div class="trend up"><i class="fa fa-long-arrow-up"></i> +10.66%</div>
              <div class="sparkline member">
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="panel padder-v item flex">
            <div class="summary">
              <div class="h1 text-primary font-thin h1">￥123,321</div>
              <span class="text-muted text-xs">当日订单总金额</span>
            </div>
            <div class="sparkchart">
              <div class="trend up"><i class="fa fa-long-arrow-up"></i> +10.66%</div>
              <div class="sparkline member">
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- stats -->
      <div class="row">
        <div class="col-md-5">
          <div class="row row-sm text-center">
            <!-- 新增代理 -->
            <div class="col-xs-12 m-b-md">
              <div class="r bg-light dker item hbox no-border">
                <div class="col w-xs v-middle hidden-md">
                  <div ng-init="d3_3=[60,40]" ui-jq="sparkline" ui-options="[60,40], {type:'pie', height:40, sliceColors:['#fad733','#fff']}" class="sparkline inline">
                    <canvas width="40" height="40" style="display: inline-block; width: 40px; height: 40px; vertical-align: top;"></canvas>
                  </div>
                </div>
                <div class="col dk padder-v r-r">
                  <div class="text-primary-dk font-thin h1"><span>¥12,670</span></div>
                  <span class="text-muted text-xs">平台分红</span>
                </div>
              </div>
            </div>

            <!-- 新增会员 -->
            <div class="col-xs-6">
              <div class="panel padder-v item">
                <div class="font-thin h1">￥120,089</div>
                <span class="text-muted text-xs">消费分红</span>
              </div>
            </div>
            <!-- END: 新增会员 -->

            <!-- 新增订单 -->
            <div class="col-xs-6">
              <a href="" class="block panel padder-v item">
                <span class="font-thin h1 block">￥32,089</span>
                <span class="text-muted text-xs">分享分红</span>
              </a>
            </div>
            <!-- END: 新增订单 -->

            <!-- 新增合约 -->            
            <div class="col-xs-6">
              <a href="" class="block panel padder-v item">
                <span class="font-thin h1 block">￥32,089</span>
                <span class="text-muted text-xs">设备分红</span>
              </a>
            </div>
            <!-- END: 新增合约 -->

            <!-- 新增代理 -->
            <div class="col-xs-6">
              <div class="panel padder-v item">
                <div class="font-thin h1">￥32,089</div>
                <span class="text-muted text-xs">代理分红</span>
              </div>
            </div>
            <!-- END: 新增代理 -->



          </div>
        </div>
        <div class="col-md-7">
          <div class="panel wrapper">
            <h4 class="font-thin m-t-none m-b text-muted">最近7日平台分红</h4>
            <div id="chartDividend" ui-jq="plot" ui-refresh="showSpline" style="height: 246px; padding: 0px; position: relative;">
            </div>
          </div>
        </div>
      </div>
      <!-- / stats -->

      <!-- service -->
      <div class="panel hbox hbox-auto-xs no-border">
        <div class="col wrapper">
          <i class="fa fa-circle-o text-primary m-r-sm pull-right"></i>
          <h4 class="font-thin m-t-none m-b-none">最近7日订单</h4>
          <span class="m-b block text-sm text-muted">Service report of this year (updated 1 hour ago)</span>
          <div id="chartOrder" ui-jq="plot" style="height: 240px; padding: 0px; position: relative;">
            
          </div>
        </div>
        <div class="col wrapper-lg w-lg bg-light dk r-r">
          <h4 class="font-thin m-t-none m-b">Reports</h4>
          <div class="">
            <div class="">
              <span class="pull-right text-primary">60%</span>
              <span>Consulting</span>
            </div>
            <div class="progress progress-xs m-t-sm bg-white">
              <div class="progress-bar bg-primary" data-toggle="tooltip" data-original-title="60%" style="width: 60%"></div>
            </div>
            <div class="">
              <span class="pull-right text-primary">35%</span>
              <span>Online tutorials</span>
            </div>
            <div class="progress progress-xs m-t-sm bg-white">
              <div class="progress-bar bg-info" data-toggle="tooltip" data-original-title="35%" style="width: 35%"></div>
            </div>
            <div class="">
              <span class="pull-right text-warning">25%</span>
              <span>EDU management</span>
            </div>
            <div class="progress progress-xs m-t-sm bg-white">
              <div class="progress-bar bg-warning" data-toggle="tooltip" data-original-title="23%" style="width: 25%"></div>
            </div>
          </div>
          <p class="text-muted">Dales nisi nec adipiscing elit. Morbi id neque quam. Aliquam sollicitudin venenatis</p>
        </div>
      </div>
      <!-- / service -->
    </div>
</div>











<script type="text/javascript">
var dataSource = [{
    dividendDate: '11-28',
    orderDividend: 66,
    affilicateDividend: 768,
    investmentDividend: 1768,
    agentDividend: 568
}, {
    dividendDate: '11-29',
    orderDividend: 87,
    affilicateDividend: 1098,
    investmentDividend: 768,
    agentDividend: 968
}, {
    dividendDate: '11-30',
    orderDividend: 110,
    affilicateDividend: 1487,
    investmentDividend: 1768,
    agentDividend: 1368
}, {
    dividendDate: '12-1',
    orderDividend: 210,
    affilicateDividend: 2650,
    investmentDividend: 1768,
    agentDividend: 1968
}, {
    dividendDate: '12-2',
    orderDividend: 361,
    affilicateDividend: 4567,
    investmentDividend: 1768,
    agentDividend: 2568
}, {
    dividendDate: '12-3',
    orderDividend: 406,
    affilicateDividend: 5768,
    investmentDividend: 1768,
    agentDividend: 3568
}];

var chart = $("#chartDividend").dxChart({
        palette: "violet",
        dataSource: dataSource,
        commonSeriesSettings: {
            type: "spline",
            argumentField: "dividendDate"
        },
        commonAxisSettings: {
            grid: {
                visible: true
            }
        },
        margin: {
          top: 0,
          left: 0,
          right: 0,
          bottom: 0
        },
        series: [
            { valueField: "orderDividend", name: "消费分红" },
            { valueField: "affilicateDividend", name: "分享分红" },
            { valueField: "investmentDividend", name: "设备分红" },
            { valueField: "agentDividend", name: "代理分红" }
        ],
        tooltip:{
            enabled: true
        },
        legend: {
            verticalAlignment: "top",
            horizontalAlignment: "right"
        },
        "export": {
            enabled: false
        },
        argumentAxis: {
            label:{
                format: {
                    type: "decimal"
                }
            },
            allowDecimals: false,
            axisDivisionFactor: 60
        }
    }).dxChart("instance");


var chart = $("#chartOrder").dxChart({
        palette: "violet",
        dataSource: dataSource,
        commonSeriesSettings: {
            type: "spline",
            argumentField: "dividendDate"
        },
        commonAxisSettings: {
            grid: {
                visible: true
            }
        },
        margin: {
          top: 0,
          left: 0,
          right: 0,
          bottom: 0
        },
        series: [
            { valueField: "orderDividend", name: "订单总数" },
            { valueField: "agentDividend", name: "订单总金额" }
        ],
        tooltip:{
            enabled: true
        },
        legend: {
            verticalAlignment: "top",
            horizontalAlignment: "right"
        },
        "export": {
            enabled: false
        },
        argumentAxis: {
            label:{
                format: {
                    type: "decimal"
                }
            },
            allowDecimals: false,
            axisDivisionFactor: 60
        }
    }).dxChart("instance");
</script>























































<script>
var oilCosts = [
  {
    orderDate: 1,
    orderTotal: 155
  }, 
  {
    orderDate: 2,
    orderTotal: 230,
  }, 
  {
    orderDate: 3,
    orderTotal: 342,
  }, 
  {
    orderDate: 4,
    orderTotal: 378,
  }, 
  {
    orderDate: 5,
    orderTotal: 412,
  }, 
  {
    orderDate: 6,
    orderTotal: 465,
  }, 
  {
    orderDate: 7,
    orderTotal: 521,
  }
];

var oilOptions = {
    dataSource: oilCosts,
    argumentField: "orderDate",
    valueField: "orderTotal",
    type: "splinearea",
    showMinMax: false,
    showFirstLast: false,
    lineColor: '#7266ba',
    firstLastColor: '#7266ba',
    lineWidth: 1,
    pointSize: 1,
    margin: {
      left: 0,
      right: 0,
      top: 0,
      bottom: 0
    },
    tooltip: {
      enabled: false
    }
};

$(".sparkline.member").dxSparkline(oilOptions);
</script>